@tailwind base;
@tailwind components;
@tailwind utilities;

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

::selection {
  color: #fff;
  /* background-color: hsl(var(--primary)); */
  background-color: #111;
}

/* 整个滚动条（包括轨道） */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
  background-color: darkgrey;
  border-radius: 4px;
}

/* 滚动条轨道 */
::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.custom-card-btn {
  opacity: 0;
}

.custom-card:hover .custom-card-btn,
.custom-card:hover .card-component-delete-icon {
  opacity: 1;
}

.l2Param .l2Param-edit {
  opacity: 0;
}

.l2Param:hover .l2Param-edit {
  opacity: 1;
}

.stroke-connection.selected path {
  stroke-width: 2;
  stroke-dasharray: 0;
}

.animate-cursor {
  animation: pulse2 1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse2 {
  0%,
  20% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(0.6);
  }

  /* 0%, 20%, 80%, 100% {
	  opacity: 1;
	  transform: scale(1);
	}
	50% {
	  opacity: 0;
	  transform: scale(1.6);
	} */
}

.anwser-souce span {
  color: #347ef9;
  cursor: pointer;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@font-face {
  font-family: text-security-disc;
  src: url('assets/text-security-disc.woff') format('woff');
}

/* pdf-text */
.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  transform-origin: 0% 0%;
}

.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer ::selection {
  background: #357ef9;
}

.textLayer br::selection {
  background: transparent;
}

.flag.active {
  background: linear-gradient(to right, rgba(53, 126, 249, 0.6), transparent);
}

.flag:after {
  content: '';
  position: absolute;
  width: 23px;
  height: 2px;
  right: -3px;
  top: 7px;
  background: rgba(53, 126, 249, 0.6);
  transform: rotate(-50deg) translate(0, 0);
}

.flag::before {
  content: '';
  position: absolute;
  width: 23px;
  height: 2px;
  right: -3px;
  top: 25px;
  background: rgba(53, 126, 249, 0.6);
  transform: rotate(50deg) translate(0, 0);
}

.chat .chat-image {
  align-self: start;
}

.chat-bubble:before {
  display: none;
}

.build-tab {
}

.build-tab a.active {
  color: #024fe5;
  background: #fff;
  box-shadow: 1px 1px 2px 0 #e9e9e9;
  /* background: #F4F5F8;
	padding: 10px 40px; */
}

.build-tab a.active > svg {
  color: #024fe5 !important;
}

.build-tab a {
  color: #666;
  /* background: #F4F5F8;
	padding: 10px 40px; */
}

.build-tab a > svg {
  color: #666;
}

.build-tab a:hover {
  color: #024fe5;
}

.build-tab a:hover > svg {
  color: #024fe5;
}

.bs-chat-bg {
  width: 100%;
  background: url(/points.png) 0 100% repeat-x;
  background-size: 10px 432px;
}

.gradient {
  background-color: 'linear-gradient(90deg, #3B74FB 0%, #6468F7 50.5%, #9659F2 100%);';
}

/* flex布局  */
.flexRow {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexRowStart {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.flexRowJustBet {
  justify-content: space-between;
}

.flexRowJustAro {
  justify-content: space-around;
}

.flexRowJustStart {
  justify-content: flex-start;
  gap: 16px;
}

.flexRowEnd {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

.flexWrap {
  flex-wrap: wrap;
}

.flexCol {
  display: flex;
  flex-direction: column;
}

.flexColCen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.flexColEnd {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
}

/* overFlowY scroll 隐藏滚动条 */
.caseOverFlowY {
  overflow-y: scroll;
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.caseOverFlowY::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, and Opera */
}

.caseOverFlowX {
  overflow-x: scroll;
  /* 隐藏默认的滚动条样式 */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.caseOverFlowX::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, and Opera */
}

/* 超出显示省略号 */
.domOverflowEllip {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: break-all;
}

.domOverflowEllip_two {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-break: break-all;
}

.domOverflowEllip_thr {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  word-break: break-all;
}

/* 取消按钮 border边框+渐变 */
.closeBtnStyles {
  color: #131921;
  border: 1px solid transparent;
  background-clip: padding-box, border-box;
  background-origin: padding-box, border-box;
  background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #3b74fb, #6468f7, #9659f2);
}

.closeBtnStyles:hover {
  color: #131921 !important;
  border: 1px solid transparent !important;
  background-clip: padding-box, border-box !important;
  background-origin: padding-box, border-box !important;
  background-image: linear-gradient(to right, #fff, #fff), linear-gradient(to right, #3b74fb, #6468f7, #9659f2) !important;
}

/* 点击小手cur */
.cursonCase {
  cursor: pointer;
}
